/**
 * 基本信息
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { NoDataC, IconC, SecondHeaderC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Spin } from 'antd';
import styles from './style.less';
import accounting from 'accounting';
import moment from 'moment';

@Form.create()
class BasicInfo extends PureComponent {
  state = {
    baseInfoData: undefined, // 基本信息数据
  };

  componentDidMount() {
    if (this.props.searchData && this.props.searchData.portfolioCode) {
      this.getData(this.props.searchData);
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.searchData) !== JSON.stringify(this.props.searchData)) {
      this.getData(nextProps.searchData);
    }
  }

  componentWillUnmount() {
    // 离开前清除models数据
  }

  // 获取echarts数据
  getData = (searchProps) => {
    const obj = {
      ...searchProps,
      startDate: moment(searchProps.beginDate).format('YYYYMMDD'),
      portfolioId: searchProps.portfolioCode,
      endDate: moment(searchProps.endDate).format('YYYYMMDD'),
    };
    delete obj.beginDate;
    delete obj.portfolioCode;
    delete obj.portfolioName;
    delete obj.timeRange;
    this.props.dispatch({
      type: 'performanceAnalysisReportM/getBasicInfoData',
      payload: { ...obj },
      callback: (type, res) => {
        if (type == 'success') {
          this.setState({
            baseInfoData: res,
          });
        }
      },
    });
  };

  // 数字类型数据处理-新
  changeNum = (text, dataType, fix, title) => {
    if (text === null || text === undefined) {
      return '--';
    } else if (dataType == 'rate') {
      // 比率类型
      if (title == '杠杆率') {
        // 杠杆率需要乘100展示
        return `${(Number(text) * 100).toFixed(fix)}%`;
      }
      return `${Number(text).toFixed(fix)}%`;
    } else if (dataType == 'numb') {
      // 数额类型
      return accounting.formatNumber(Number(text), fix);
    } else {
      // 非数值
      return text;
    }
  };

  // 数额类项渲染
  /**
   * title:字段
   * result:内容
   * dataType:'rate'=比率  'numb'=数额  'name'=非数字
   * fix:精度
   */
  amountItemRend = (title, result, dataType, fix) => {
    return (
      <div className={styles.itemBox}>
        <div style={{ flex: '1', textAlign: 'center', backgroundColor: '#EEF0F5', borderBottom: '1px solid #fff' }}>
          <span className={styles.itemTitle}>{title}</span>
        </div>
        <div className={styles.itemResult1} style={{ flex: '1', textAlign: 'center', borderBottom: '1px solid #EEF0F5', borderTop: '1px solid #EEF0F5' }}>
          <span className={styles.itemResult}>{this.changeNum(result, dataType, fix, title)}</span>
        </div>
      </div>
    );
  };

  render() {
    const { baseInfoData } = this.state;
    return (
      <div className={styles.basicInfoContain}>
        {/* 基本信息 */}
        <SecondHeaderC title={'基本指标'} />
        <Spin spinning={this.props.loading.effects['performanceAnalysisReportM/getBasicInfoData'] == true}>
          {baseInfoData && baseInfoData.length ? (
            <div className={styles.basicInfo}>
              <div className={styles.baseRow}>
                {baseInfoData &&
                  baseInfoData.map((item, index) => {
                    if (index > 5) return null;
                    return (
                      <div key={index} className={styles.basicItem}>
                        {this.amountItemRend(item.title, item.result, item.dataType, item.fix)}
                      </div>
                    );
                  })}
              </div>
              <div className={styles.baseRow}>
                {baseInfoData &&
                  baseInfoData.map((item, index) => {
                    if (index < 6) return null;
                    return (
                      <div key={index} className={styles.basicItem}>
                        {this.amountItemRend(item.title, item.result, item.dataType, item.fix)}
                      </div>
                    );
                  })}
              </div>
            </div>
          ) : (
            <NoDataC />
          )}
        </Spin>
      </div>
    );
  }
}
export default connect(({ performanceAnalysisReportM, loading }) => ({
  performanceAnalysisReportM,
  loading,
}))(BasicInfo);
